<!DOCTYPE html>
<html class="x-admin-sm">

{include file="common/static" /}
{include file="common/resources" /}

    <body>
        <div class="x-nav">
            <span class="layui-breadcrumb">
                <a href="">首页</a>
                <a>
                    <cite>预订信息</cite>
                </a>
            </span>
            <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right" onclick="location.reload()" title="刷新">
                <i class="layui-icon layui-icon-refresh" style="line-height:30px"></i>
            </a>
        </div>
        <div class="layui-fluid">
            <div class="layui-row layui-col-space15" id="app">
                <div class="layui-col-md12">
                    <div class="layui-card">

                        <div class="layui-card-body ">
                            <form class="layui-form layui-col-space5" method="post" action="">
                                <div class="layui-input-inline layui-show-xs-block">
                                    <input class="layui-input" placeholder="开始日" name="start" id="start"></div>
                                <div class="layui-input-inline layui-show-xs-block">
                                    <select name="type_id">
                                        <option value="">全部</option>
                                        {volist name='layout' id='lay'}
                                            <option value="{$lay.id}">{$lay.type_name}</option>
                                        {/volist}
                                    </select>
                                </div>
                                <div class="layui-input-inline layui-show-xs-block">
                                    <button class="layui-btn" lay-submit="" lay-filter="sreach">
                                        <i class="layui-icon">&#xe615;</i></button>
                                </div>
                            </form>
                        </div>

                        <div class="layui-card-body ">
                            <table class="layui-table layui-form">
                                <thead>
                                    <tr>
                                        <th>房型</th>
                                        <th>房间号</th>
                                        {volist name='week' id='w'}
                                        <th>{$w}</th>
                                        {/volist}
                                </thead>
                                <tbody>
                                {volist name='list' id='vo'}
                                    <tr>
                                        <td>
                                            <img src="/static/ico/layout.png"/>
                                            {$vo.type_name}
                                        </td>
                                        <td>
                                            <img src="/static/ico/room_num.png"/>
                                            {$vo.room_num}
                                        </td>
                                        {volist name="date" id='d'}
                                        <td @click="action({$vo.id},{$d})" id="{$vo.id}str{$d}">
                                            {volist name="subscribe" id='v1'}
                                                {if $v1.room_id == $vo.id}
<!--                                                    预订:{$v1.in_time}<br>-->
<!--                                                    日期：{$d}-->
                                                    {if $v1.in_time <= $d && $v1.move_time >= $d}
                                                        <button type="button"	class="layui-btn layui-btn-warm" >
                                                            已被预订
                                                        </button>
                                                        <input type="hidden" value="已被预订" id="yuding{$vo.id}{$d}">
                                                    {/if}
                                                {/if}

                                            {/volist}

                                        </td>
                                        {/volist}
                                    </tr>
                                {/volist}
                                </tbody>
                            </table>
                            {$list|raw}
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </body>

    {if $time == '' }
    <script>
        layui.use(['laydate', 'form'],
            function() {
                var laydate = layui.laydate;

                //执行一个laydate实例
                laydate.render({
                    elem: '#start' //指定元素
                    ,value: new Date(new Date().getTime() + 24*60*60*1000)
                });
            });
    </script>
    {else /}
    <script>
        var time = "{$time}";
        layui.use(['laydate', 'form'],
            function() {
                var laydate = layui.laydate;

                //执行一个laydate实例
                laydate.render({
                    elem: '#start' //指定元素
                    ,value: time
                });
            });
    </script>
    {/if}
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    new 	Vue({
        el:'#app',
        data:{
        },
        methods:{
            subscribe:function(id,date){
               console.log('日期'+date+'/房间id'+id);
                $.ajax({
                    type:"post",
                    url: "{:url('home/subscribe/subscribe_date')}",
                    data: {
                        id:id,
                        date:date
                    },
                    success: function(data){
                        console.log(data);

                    }});
            },
            action:function (id,week) {

                if($('#yuding'+id+week).val() == '已被预订'){
                    return false;
                }
                $('#ids'+id+week).remove();
                var text = "                                             <div id=\"ids"+id+week+"\">\n" +
                        "                                                <button type=\"button\" \tclass=\"layui-btn layui-btn-warm\"\n" +
                        "                                                        onclick=\"xadmin.open('随客管理','/home/subscribe/subscribe_date/room_id/"+id+"/date/"+week+"',1000,700)\">\n" +
                        "                                                    预订\n" +
                        "                                                </button>\n" +
                        "\n" +
                        "                                                <button type=\"button\" \tclass=\"layui-btn layui-btn-danger\">锁房</button>\n" +
                        "                                            </div> ";
                $('#'+id+'str'+week).append(text);
            }
        },
        mounted:function(){
            console.log('-----4.挂载之后-----');

        },
    })

</script>




</html>